import { BasicComponent } from './basic/basic.component';
import { IconsComponent } from './icons/icons.component';
import { Demo3Component } from './demo3/demo3.component';
import { Demo4Component } from './demo4/demo4.component';
import { Demo5Component } from './demo5/demo5.component';
import { ShowLineComponent } from './show-line/show-line.component';
import { CustomizeNodeComponent } from './customize-node/customize-node.component';
import { SearchComponent } from './search/search.component';
import { ExpandCollapseComponent } from './expand-collapse/expand-collapse.component';
import { OperateComponent } from './operate/operate.component';
import { Demo11Component } from './demo11/demo11.component';
import { Demo12Component } from './demo12/demo12.component';
import { EventComponent } from './event/event.component';
import { Demo14Component } from './demo14/demo14.component';

export const TreeConfig = {
  location: 'Tree',
  description: `通过树形结构分层展示数据关系。当扁平化展现方式无法满足要求时，再考虑使用树形结构进行展现。`,
  description_en: `Data relationships are displayed in the hierarchical tree structure.  When the flat display can not meet the requirements, then consider using tree structure for display.`,
  component: [
    {
      demo: BasicComponent,
      codePath: 'showcase/tree/basic/basic.component',
      demoTitle: '基础使用',
      demoDescription: '基础用法。',
      demoTitle_en: `Basic Use`,
      demoDescription_en: `Basic use.`,
    },
    {
      demo: IconsComponent,
      codePath: 'showcase/tree/icons/icons.component',
      demoTitle: '自定义icon',
      demoDescription: `lvShowContentIcon 节点内容前的图标，如果不设置 contentToggleIcon 展示默认图标，contentToggleIcon = ''不展示图标。`,
      demoTitle_en: `Custom Icon`,
      demoDescription_en: `lvShowContentIcon The icon before the content of the node. If contentToggleIcon is not set to display the default icon, contentToggleIcon = '' does not display the icon.`,
    },
    {
      demo: Demo5Component,
      codePath: 'showcase/tree/demo5/demo5.component',
      demoTitle: 'checkbox多选',
      demoDescription: '通过checkbox来实现多选目的。',
      demoTitle_en: `Checkbox`,
      demoDescription_en: `Realise multiple selection by checkbox`,
    },
    {
      demo: Demo14Component,
      codePath: 'showcase/tree/demo14/demo14.component',
      demoTitle: '自定义checkbox',
      demoDescription: '自定义每个节点checkbox是否显示',
      demoTitle_en: `custom checkbox`,
      demoDescription_en: `Customize whether the checkbox of each node is displayed`,
    },
    {
      demo: Demo3Component,
      codePath: 'showcase/tree/demo3/demo3.component',
      demoTitle: '单选',
      demoDescription: 'lvSelectionMode设置为single时，支持单选。',
      demoTitle_en: `Radio Button`,
      demoDescription_en: `When lvSelectionMode is set to single, radio button is supported.`,
    },
    {
      demo: Demo4Component,
      codePath: 'showcase/tree/demo4/demo4.component',
      demoTitle: '多选',
      demoDescription: 'lvSelectionMode设置为multiple时，支持多选。',
      demoTitle_en: `Multiple Selection`,
      demoDescription_en: `When lvSelectionMode is set to multiple, multiple selection is supported.`,
    },
    {
      demo: ShowLineComponent,
      codePath: 'showcase/tree/show-line/show-line.component',
      demoTitle: '隐藏连接线',
      demoDescription: '通过配置lvShowLine，实现树的连接线显示隐藏',
      demoTitle_en: `Connecting Line`,
      demoDescription_en: `By configuring lvShowLine, the connection line of the tree can be displayed and hidden`,
    },
    {
      demo: Demo11Component,
      codePath: 'showcase/tree/demo11/demo11.component',
      demoTitle: '异步加载',
      demoDescription: '异步加载',
      demoTitle_en: `Asynchronous load `,
      demoDescription_en: `Asynchronous load`,
    },
    {
      demo: CustomizeNodeComponent,
      codePath: 'showcase/tree/customize-node/customize-node.component',
      demoTitle: '自定义模板',
      demoDescription: '树模板支持自定义',
      demoTitle_en: `Customising Template`,
      demoDescription_en: `Tree template is supported to be customised.`,
    },
    {
      demo: SearchComponent,
      codePath: 'showcase/tree/search/search.component',
      demoTitle: '搜索',
      demoDescription: '树中支持搜索',
      demoTitle_en: `Search`,
      demoDescription_en: `Search in the tree.`,
    },
    {
      demo: ExpandCollapseComponent,
      codePath: 'showcase/tree/expand-collapse/expand-collapse.component',
      demoTitle: '展开折叠',
      demoDescription: '支持树整体或局部展开及折叠',
      demoTitle_en: `Unfold`,
      demoDescription_en: `Overall or partial unfolding and collapsing of the tree is supported.`,
    },
    {
      demo: OperateComponent,
      codePath: 'showcase/tree/operate/operate.component',
      demoTitle: '增删改查',
      demoDescription: '支持增删改查操作',
      demoTitle_en: `CRUD`,
      demoDescription_en: `Operations creating, reading, updating and deleting are supported.`,
    },
    {
      demo: Demo12Component,
      codePath: 'showcase/tree/demo12/demo12.component',
      demoTitle: '虚拟滚动',
      demoDescription: '虚拟滚动',
      demoTitle_en: `Virtual scrolling`,
      demoDescription_en: `Virtual scrolling`,
    },
    {
      demo: EventComponent,
      codePath: 'showcase/tree/event/event.component',
      demoTitle: '事件',
      demoDescription: 'Event',
      demoTitle_en: `Event`,
      demoDescription_en: `Event`,
    },
  ],
  useRule: [],
  useSuggestion: ['树的层级建议不要超过5级，不然会导致管理起来的效率降低，且随着横向空间的减少，名称很有可能显示不全，对可读性造成影响。'],
  mApi: [
    {
      name: 'lv-tree',
      name_en: 'lv-tree',
      selector: 'lv-tree',
      snippet: `<lv-tree [lvData]='\${1:data}'></lv-tree>`,
      api: [
        {
          attribute: 'LvData',
          type: 'TreeNode[]',
          default: '',
          description: `
            源数据。TreeNode 属性如下：
            <ul>
              <li>[key: string] 节点的关键key，具有唯一性 (可选)</li>
              <li>[label: string] 节点显示的名称 (必选)</li>
              <li>[data: any] 节点的data值 (可选)</li>
              <li>[expandedToggleIcon: { true?: string; false?: string } | string] 自定义节点展开收起图标 (可选，规范不建议)</li>
              <li>[contentToggleIcon: { true?: string; false?: string } | string] 节点内容前图标 (可选)</li>
              <li>[indeterminate: boolean] 节点是否半选 (可选)</li>
              <li>[showCheckbox: boolean] 是否显示 checkbox，lvShowCheckbox 为 true 时生效 (可选)</li>
              <li>[expanded: boolean] 设置节点是否展开(叶子节点无效)，默认值 false (可选)</li>
              <li>[disabled: boolean] 设置是否禁用节点(不可进行任何操作)，默认值 false (可选)</li>
              <li>[hidden: boolean] 是否隐藏选项，默认值 false (可选)</li>
              <li>[isLeaf: boolean] 该节点是否为叶子节点，默认值 false (可选)</li>
              <li>[children: TreeNode[]] 子节点 (可选)</li>
            </ul>
          `,
          description_en: `
            source data. The TreeNode properties are as follows:
            <ul>
              <li>[key: string] The key key of the node, unique (optional)</li>
              <li>[label: string] node display name (required)</li>
              <li>[data: any] node's data value (optional)</li>
              <li>[expandedToggleIcon: { true?: string; false?: string } | string] Custom node expand and collapse icon (optional, not recommended by spec)</li>
              <li>[contentToggleIcon: { true?: string; false?: string } | string] Icon before node content (optional)</li>
              <li>[indeterminate: boolean] Whether the node is semi-selected (optional)</li>
              <li>[showCheckbox: boolean] whether to show checkbox (optional)</li>
              <li>[expanded: boolean] Set whether the node is expanded (leaf nodes are invalid), the default value is false (optional)</li>
              <li>[disabled: boolean] Set whether to disable the node (no operations can be performed), the default value is false (optional)</li>
              <li>[hidden: boolean] whether to hide the option, the default value is false (optional)</li>
              <li>[isLeaf: boolean] Whether the node is a leaf node, the default value is false (optional)</li>
              <li>[children: TreeNode[]] child nodes (optional)</li>
            </ul>
          `,
        },
        {
          attribute: 'lvSourceData',
          type: 'TreeDataSource<TreeNode[]>',
          default: '',
          description: `超级data`,
          description_en: `Super data.`,
        },
        {
          attribute: 'lvAsync',
          type: 'boolean',
          default: '',
          description: `是否为异步`,
          description_en: `Is it asynchronous.`,
        },
        {
          attribute: 'lvSelectionMode',
          type: 'LvSelectSM',
          default: '',
          description: `选择模式`,
          description_en: `Selection mode.`,
        },
        {
          attribute: 'lvSelection',
          type: 'TreeNode[]',
          default: '',
          description: `选中项`,
          description_en: `Selected item.`,
        },
        {
          attribute: 'lvSelectionAssociate',
          type: 'boolean',
          default: 'true',
          description: `选择关联，选中是否关联父子选中`,
          description_en: `Select association, select whether to associate parent and child.`,
        },
        {
          attribute: 'lvHighlightContent',
          type: 'string',
          default: '',
          description: '在节点中高亮显示传入的内容',
          description_en: 'Highlight incoming content in node.'
        },
        {
          attribute: 'lvCompareWith',
          type: 'string | ((o: any) => any)',
          default: '',
          description: `data被选中的比较方式，默认地址比较`,
          description_en: `Data comparison method selected, default address comparison.`,
        },
        {
          attribute: 'lvShowCheckbox',
          type: 'boolean',
          default: 'false',
          description: `是否显示checkbox`,
          description_en: `Whether to display the checkbox.`,
        },
        {
          attribute: 'lvSelectedByCheckbox',
          type: 'boolean',
          default: 'false',
          description: `是否只能checkbox选中`,
          description_en: `Can only checkbox selected.`,
        },
        {
          attribute: 'lvSelectedValueMode',
          type: `'parent' | 'child' | 'both'`,
          default: 'both',
          description: `选中项返回模式，默认返回父子节点，child：只返回子节点，parent：只返回父节点。`,
          description_en: `The selected item returns the mode, the default returns the parent and child nodes, child: only returns the child node, parent: only returns the parent node.`,
        },
        {
          attribute: 'lvShowLine',
          type: 'boolean',
          default: 'true',
          description: `是否展示连接线`,
          description_en: `Whether to display the cable.`,
        },
        {
          attribute: 'lvShowExpandedIcon',
          type: 'boolean | { expandIcon: string; collapseIcon: string }',
          default: 'true',
          description: `是否显示展开图标`,
          description_en: `Whether to show the expansion icon.`,
        },
        {
          attribute: 'lvShowContentIcon',
          type: 'boolean',
          default: '',
          description: `是否显示内容前icon`,
          description_en: `Whether to display content before icon.`,
        },
        {
          attribute: 'lvBlockNode',
          type: 'boolean',
          default: 'false',
          description: `是否节点占据一行`,
          description_en: `whether the node occupies a row.`,
        },
        {
          attribute: 'lvVirtualScroll',
          type: 'boolean',
          default: 'false',
          description: '是否支持虚拟滚动',
          description_en: 'Whether to support virtual scroll',
        },
        {
          attribute: 'lvScroll',
          type: '{y: string | null}',
          default: '500px',
          description: '用于指定滚动区域的高度：{ y: "500px" }',
          description_en: 'It can also be used to specify the height of rolling area: {x: x: "500px"}',
        },
        {
          attribute: 'lvVirtualItemSize',
          type: 'number',
          default: '32',
          description: '虚拟滚动时每一列的高度',
          description_en: 'Height of each column during virtual scroll',
        },
        {
          attribute: 'lvVirtualMaxBuffer',
          type: 'number',
          default: '200',
          description: '缓冲区最大像素高度',
          description_en: 'Maximum pixel height of buffer',
        },
        {
          attribute: 'lvVirtualMinBuffer',
          type: 'number',
          default: '100',
          description: '缓冲区最小像素高度',
          description_en: 'Minimum pixel height of buffer',
        },
        {
          attribute: 'lvTrackBy',
          type: 'TrackByFunction<any>',
          default: 'node.key',
          description: '虚拟滚动的trackBy',
          description_en: 'virtual scrolling trackBy.',
        },
        {
          attribute: 'lvBeforeSelected',
          type: '(source: TreeNode) => boolean | Promise<Boolean> | Observable<Boolean>',
          default: '--',
          description: `选中前的回调函数，支持可执行函数、Promise、Observe，返回值为false可阻止选中。`,
          description_en: `Callback function before selection. Executable functions, Promise, and Observe are supported. If the return value is false, the selection is blocked.`,
        },
        {
          attribute: 'lvVirtualMaxBuffer',
          type: 'number',
          default: '0',
          description: '缓冲区最大像素高度',
          description_en: 'Maximum pixel height of buffer'
        },
        {
          attribute: 'lvVirtualMinBuffer',
          type: 'number',
          default: '0',
          description: '缓冲区最小像素高度',
          description_en: 'Minimum pixel height of buffer'
        },
      ],
      event: [
        {
          event: 'lvClick',
          parameter: ``,
          description: '节点单击回调，响应区域不包含复选框',
          description_en: 'Node click callback,The response area does not contain a check box..',
        },
        {
          event: 'lvDblClick',
          parameter: ``,
          description: '节点双击回调，响应区域不包含复选框',
          description_en: 'Node double click callback,The response area does not contain a check box..',
        },
        {
          event: 'lvCheck',
          parameter: ``,
          description: '节点check回调，响应区域包含复选框',
          description_en: 'Node check callback,Response area contains check boxes.',
        },
        {
          event: 'lvSelect',
          parameter: ``,
          description: '节点check或单击回调，响应区域包含复选框',
          description_en: 'Node check or click callback,Response area contains check boxes.',
        },
        {
          event: 'lvSelectionChange',
          parameter: ``,
          description: '选中项变化回调',
          description_en: 'Selected item change callback.',
        },
        {
          event: 'lvExpandedChange',
          parameter: ``,
          description: '节点展开变化回调',
          description_en: 'Node expansion change callback.',
        },
        {
          event: 'lvScrollEnd',
          parameter: ``,
          description: '虚拟滚动到底部时回调事件',
          description_en: 'Callback event when virtual scrolling to the bottom.'
        },
        {
          event: 'lvScrollingChange',
          parameter: ``,
          description: '虚拟滚动中回调事件',
          description_en: 'Virtual scrolling callback event.'
        }
      ],
    },
  ],
};
